<template>
    <div class="goods-auth-detail">
        <a-modal width="1300px" :visible="visible" title="编辑资源" @cancel="closeModal" class="yuan-modal goods-auth-detail-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="saveLoading">
                <a-form-model layout="inline" class="yuan-form disable-form" ref="form" :model="formData" :rules="rules"
                    :label-col="{ style: { width: '150px' } }" :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">

                    <div class="form-panel yuan-form-col3">
                        <div class="form-panel-box">
                            <div class="form-title">商品信息</div>
                            <a-form-model-item class="yuan-form-item" label="商品分类" prop="twoClassifyId">
                                <a-cascader class="yuan-form-input" v-model="formData.classifyId" :options="categoryData"
                                    placeholder="请选择商品分类" />
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="品牌" prop="brand">
                                <span class="yuan-form-input">{{formData.brand}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="商品名称" prop="name">
                                <span class="yuan-form-input">{{formData.name}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="产地" prop="placeOfOrigin">
                                <span class="yuan-form-input">{{formData.placeOfOrigin}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="关键词" prop="keyword">
                                <span class="yuan-form-input">{{formData.keyword}}</span>
                            </a-form-model-item>
                            <!-- <a-form-model-item class="yuan-form-item" label="是否允许使用优惠券" prop="ifUsePreferentialCard">
                                <span class="yuan-form-input">{{formData.ifUsePreferentialCard?'是':'否'}}</span>
                            </a-form-model-item> -->
                            <!-- <a-form-model-item class="yuan-form-item" label="商品运费" prop="freight">
                                <span class="yuan-form-input">{{formData.freight/100}}</span>
                                <span class="yuan-form-unit">元</span>
                            </a-form-model-item> -->
                            <!-- <a-form-model-item class="yuan-form-row" label="商品描述" prop="description">
                                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                    v-model="formData.description" placeholder="请输入商品描述" :maxLength="500" disabled />
                            </a-form-model-item> -->

                            <a-form-model-item label="商品图片" class="yuan-form-row" v-if="pageReady" prop="pictures">
                                <UploadVue :uploadLength="6" :defImgList="formData.pictures.length>0?formData.pictures:[]"
                                    :onlyShow="true" />
                                <div style="line-height:30px">jpg.png.gif格式.不超过2MB，最多6张</div>
                            </a-form-model-item>

                            <a-form-model-item class="yuan-form-row" label="商品详情" prop="details">
                                <div class="editor" style="min-height:300px;width:1000px">
                                    <Toolbar style="border-bottom: 1px solid #ccc;" :editor="editorRef"
                                        :defaultConfig="editorConfig.toolbarConfig" mode="default" />
                                    <Editor v-model="formData.details" :defaultConfig="editorConfig" mode="default"
                                        @onCreated="handleCreated" />
                                </div>
                            </a-form-model-item>
                        </div>

                        <div class="form-panel-box" style="margin-top:20px">
                            <div class="form-title">
                                <span style="flex-grow:1">商品规格</span>

                            </div>
                            <div class="case-list" v-for="(item,index) in sizeList">
                                <div class="case-title">
                                    规格{{index+1}}
                                </div>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="名称">
                                    <span class="yuan-form-input">{{item.name}}</span>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="价格">
                                    <span class="yuan-form-input">{{item.price}}</span>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="商品库存">
                                    <span class="yuan-form-input">{{item.inventory}}</span>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-row" label="库存预警值">
                                    <div class="yuan-form-input">{{item.inventoryWarn}}</div>
                                </a-form-model-item>
                                <div class="case-btn-box">

                                </div>
                            </div>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <template v-if="!isShow">
                    <a-button @click="pass" type="primary">
                        通过审核
                    </a-button>
                    <a-button @click="clickRefuse" type="danger">
                        驳回
                    </a-button>
                </template>

                <a-button @click="closeModal">
                    关闭
                </a-button>
            </template>
        </a-modal>
        <a-modal width="600px" title="拒绝原因" :visible="refuseVisible" @ok="refuseOk" @cancel="refuseCancel" okText="确定"
            cancelText="取消">
            <a-spin tip="Loading..." :spinning="refuseLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">

                        <a-form-model-item label="拒绝原因" prop="number">
                            <a-input v-model="rejectCause" type="textarea" style="width: 500px;" :rows="5" placeholder="请输入拒绝原因"
                                :maxLength="500" />
                        </a-form-model-item>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import UploadVue from "@/components/upload.vue";
import shopMallApi from "@/api/shopMallApi";
import { MENU_CONF, toolbarConfig } from "@/utils/wangeditors";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
@Component({
    name: "tpl",
    components: { UploadVue, Editor, Toolbar },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: false }) isShow!: boolean;
    @Prop({ default: "" }) editInfo!: any;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            if (this.editInfo.id) {
                this.getGoodsDetail();
            }
        } else {
            this.pageReady = false;
        }
    }
    saveLoading = false;
    formData: any = {
        pictures: [],
    };
    sizeList = [{}, {}];
    rules = {
        pageTable: [{ required: true, message: "请输入banner标题", trigger: "change" }],
        pictures: [{ required: true, message: "请上传banner图片", trigger: "change" }],
    };
    pageReady = false;

    async mounted() {
        this.getClassifyData();
    }
    closeModal() {
        this.$emit("closeModal");
    }

    clickRefuse() {
        this.refuseVisible = true;
    }
    rejectCause = "";
    refuseLoading = false;
    refuseVisible = false;
    refuseCancel() {
        this.refuseVisible = false;
    }
    pass() {
        this.$confirm({
            title: "确定要通过吗？",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                const res = await shopMallApi.abutmentAudit({
                    id: this.formData.id,
                    auditCause: "",
                    auditStatus: 1,
                });
                this.$message.success(res.msg);
                this.closeModal();
                this.$emit("resetList");
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
    }
    async refuseOk() {
        this.refuseLoading = true;
        try {
            const res = await shopMallApi.abutmentAudit({
                id: this.formData.id,
                auditCause: this.rejectCause,
                auditStatus: 2,
            });
            this.refuseVisible = false;
            this.$message.success(res.msg);
            this.closeModal();
            this.$emit("resetList");
        } finally {
            this.refuseLoading = false;
        }
    }
    async getGoodsDetail() {
        this.saveLoading = true;
        try {
            const res = await shopMallApi.getGoodsList({ id: this.editInfo.id });
            const pictures = res.data.pictureJson ? res.data.pictureJson.map((item) => item.url) : [];

            this.formData = {
                ...res.data,
                pictures,
                ifUsePreferentialCard: res.data.ifUsePreferentialCard + "",
                freightYuan: Number(res.data.freight) / 100,
                classifyId: [res.data.firstClassifyId, res.data.twoClassifyId],
                placeData: res.data.placeOfOriginId.split(","),
            };
            console.info(this.formData);
            this.sizeList = res.data.specificationJson
                ? res.data.specificationJson.map((item) => {
                      return {
                          ...item,
                          priceYuan: Number(item.price) / 100,
                      };
                  })
                : [];

            this.pageReady = true;
        } finally {
            this.saveLoading = false;
        }
    }

    categoryData: any[] = [];
    async getClassifyData() {
        if (this.categoryData.length > 0) return;
        this.saveLoading = true;
        try {
            const res = await shopMallApi.getClassifyList({});
            const rows = res.data?.rows || [];
            const data = {};
            rows.forEach((item) => {
                if (item.level === "一级") {
                    if (data[item.id]) {
                        data[item.id].label = item.name;
                    } else {
                        data[item.id] = {
                            value: item.id,
                            label: item.name,
                            children: [],
                        };
                    }
                } else {
                    if (data[item.parentId]) {
                        data[item.parentId].children.push({ value: item.id, label: item.name });
                    } else {
                        data[item.parentId] = {
                            value: item.parentId,
                            label: "",
                            children: [{ value: item.id, label: item.name }],
                        };
                    }
                }
            });
            const dataArr: any[] = [];
            for (let i in data) {
                dataArr.push(data[i]);
            }
            this.categoryData = dataArr;
        } finally {
            this.saveLoading = false;
        }
    }

    editorRef = null;
    editorConfig = {
        placeholder: "请输入内容...",
        //配置工具栏
        toolbarConfig: toolbarConfig,
        MENU_CONF: MENU_CONF,
    };
    handleCreated(editor) {
        this.editorRef = editor; // 记录 editor 实例
    }
}
</script>
<style lang="scss">
.goods-auth-detail-modal {
    .case-list {
        background-color: #f7f7f7;
        padding: 10px 15px;
        border-radius: 6px;
        margin-bottom: 10px;
    }
    .case-title {
        font-weight: bold;
        font-size: 15px;
        color: #102040;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>
